
<script lang="ts" setup>
import { reactive } from 'vue'


const form = reactive({
  username: '',
  password: '',
})

const onSubmit = () => {
  console.log('submit!')
  console.log(form)
}
const onCancel = () => {
  console.log('cancel!')
  Object.keys(form).forEach(key => {
    form[key] = '';
  });
}
</script>

<template>
    <div class="bg">
      
    <el-form :model="form" label-width="auto" style="max-width: 600px">
        <p align="right">没有账号立即注册</p>
        <el-form-item label="用户名">
            <el-input v-model="form.username" placeholder="Please input username"/>
        </el-form-item>

        <el-form-item label="密码">
            <el-input v-model="form.password" type="password" placeholder="Please input password" show-password/>
        </el-form-item>

        <el-form-item>
        <el-button type="primary" @click="onSubmit">entry</el-button>
        <el-button type="primary" @click="onCancel">Cancel</el-button>
        </el-form-item>
    </el-form>
    </div>
</template>
    

<style scoped>
   .el-input#checkCode {
    width: 200px;
}
    .bg{
        width: 670px;
        height: 520px;
        background-color: rgba(200, 205, 205, 0.609);
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .el-form-item >>> label{
       padding-right: 100px;
        color: #000;
    }
    .el-input{
        width: 500px;
    }
    .el-button{
        margin-left:150px ;
    }
    .el-radio-group{
        margin-left: 100px;
    }


</style>
